<template>
  <div class="app-container flex-cloumn">
    <el-form :model="queryParams" ref="queryRef" v-show="showSearch">
      <el-row :gutter="12">
        <el-col :span="4">
          <el-form-item label="业务编码" prop="businNo">
            <el-input
                v-model="queryParams.businNo"
                placeholder="请输入业务编码"
                clearable
                :style="{width: '100%'}"
                @keyup.enter="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="操作人" prop="userId">
            <el-input
                v-model="queryParams.userId"
                placeholder="请输入操作人"
                clearable
                :style="{width: '100%'}"
                @keyup.enter="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="动作类型" prop="actionType">
            <el-select
                v-model="queryParams.actionType"
                placeholder="导入类型"
                clearable
                :style="{width: '100%'}"
            >
              <el-option
                  v-for="dict in actionType"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="导入结果" prop="errCode">
            <el-select
                v-model="queryParams.errCode"
                placeholder="导入结果"
                clearable
                :style="{width: '100%'}"
            >
              <el-option
                  v-for="dict in sys_common_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" icon="Search" style="margin: 3px 3px" v-hasPermi="['system:interfacelog:list']"
                       @click="handleQuery">搜索
            </el-button>
            <el-button icon="Refresh" style="margin: 3px 3px" v-hasPermi="['system:interfacelog:reset']"
                       @click="resetQuery">重置
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="10">

      <el-button
          type="danger"
          style="margin: 3px 3px"
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:interfacelog:remove']"
      >删除
      </el-button>
      <el-button
          type="danger"
          style="margin: 3px 3px"
          icon="Delete"
          @click="handleClean"
          v-hasPermi="['system:interfacelog:clean']"
      >清空
      </el-button>

      <el-button
          type="warning"
          style="margin: 3px 3px"
          icon="Download"
          @click="handleExport"
          v-hasPermi="['system:interfacelog:export']"
      >导出
      </el-button>
    </el-row>

    <xTable ref="interfaceLogRef" refId="interfaceLogRef" v-loading="loading" :data="interfaceLogList"  class="tableDragger_form"
            @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange"
            border="true" >
      <template #columList>
        <el-table-column label="序号" align="center" prop="id"/>
        <el-table-column label="业务编码" align="center" prop="businNo" :show-overflow-tooltip="true" width="130"/>
        <el-table-column label="数据" align="center" prop="originInfo" width="50" show-overflow-tooltip type="expand">
          <template #default="scope">
            <div v-html="
            syntaxHighlight(JSON.parse(scope.row.originInfo))">

            </div>

          </template>
        </el-table-column>
        <el-table-column label="批次号" align="center" prop="batchNo"/>
        <el-table-column label="操作时间" align="center" prop="opTime" sortable="custom"
                         :sort-orders="['descending', 'ascending']" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.opTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作人" align="center" prop="nickName"  width="140"/>
        <el-table-column label="操作类型" align="center" prop="opType">
          <template #default="scope">
            <dict-tag :options="opType" :value="scope.row.opType"/>
          </template>
        </el-table-column>
        <el-table-column label="动作类型" align="center" prop="actionType">
          <template #default="scope">
            <dict-tag :options="actionType" :value="scope.row.actionType"/>
          </template>
        </el-table-column>
        <el-table-column label="结果" align="center" prop="errCode">
          <template #default="scope">
            <dict-tag :options="sys_common_status" :value="scope.row.errCode"/>
          </template>
        </el-table-column>

        <el-table-column label="错误信息" align="center" prop="errMsg" width="250" show-overflow-tooltip/>


        <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button
                type="text"
                icon="View"
                @click="handleView(scope.row, scope.index)"
                v-hasPermi="['monitor:interfacelog:query']"
            >详细
            </el-button>
          </template>
        </el-table-column> -->

      </template>
    </xTable>

    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

    <!-- 操作日志详细
    <el-dialog title="导入日志" v-model="open" width="700px" append-to-body :close-on-click-modal="false" draggable>
      <el-form :model="form" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="序号：">{{ form.id }}</el-form-item>
            <el-form-item label="业务编码：">{{ form.businNo }}</el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="批次号：">{{ form.batchNo }}</el-form-item>
            <el-form-item label="操作时间：">{{ form.opTime }}</el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="操作人：">{{ form.userId }}</el-form-item>
            <el-form-item label="操作类型：">
              <dict-tag :options="opType" :value="form.opType"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="动作类型：">
              <dict-tag :options="actionType" :value="form.actionType"/>
            </el-form-item>
            <el-form-item label="结果：">
              <dict-tag :options="sys_common_status" :value="form.errCode"/>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="错误信息：">{{ form.errMsg }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="接口数据：">{{ form.originInfo }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="open = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog> -->
  </div>
</template>

<script setup name="Interfacelog">
import {list, delInterfaceLog, cleanInterfaceLog} from '@/api/system/interfacelog'
import {nextTick, ref} from 'vue'

const {proxy} = getCurrentInstance()
const {opType, sys_common_status, actionType} = proxy.useDict('opType', 'sys_common_status', 'actionType')
const screenHeight = ref(document.documentElement.clientHeight - 200 + 'px')
const interfaceLogList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref('')
const dateRange = ref([])
const defaultSort = ref({prop: 'opTime', order: 'descending'})

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    businNo: null,
    batchNo: null,
    opTime: null,
    userId: null,
    opType: null,
    actionType: null,
    errCode: null,
    errMsg: null,
    originInfo: null
  },
})

const {queryParams, form} = toRefs(data)

/** 查询登录日志 */
function getList() {
  loading.value = true
  list(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
    interfaceLogList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}


/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = []
  proxy.resetForm('queryRef')
  proxy.$refs['interfaceLogRef'].sort(defaultSort.value.prop, defaultSort.value.order)
  handleQuery()
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id)
  multiple.value = !selection.length
}

/** 排序触发事件 */
function handleSortChange(column, prop, order) {
  queryParams.value.orderByColumn = column.prop
  queryParams.value.isAsc = column.order
  getList()
}

/** 详细按钮操作 */
function handleView(row) {
  open.value = true
  form.value = row
}

/** 删除按钮操作 */
function handleDelete(row) {
  const operIds = row.operId || ids.value
  proxy.$modal.confirm('是否确认删除日志编号为"' + operIds + '"的数据项?').then(function () {
    return delInterfaceLog(operIds)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess('删除成功')
  }).catch(() => {
  })
}

/** 清空按钮操作 */
function handleClean() {
  proxy.$modal.confirm('是否确认清空所有导入日志数据项?').then(function () {
    return cleanInterfaceLog()
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess('清空成功')
  }).catch(() => {
  })
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('system/interfaceLog/export', {
    ...queryParams.value,
  }, `导入日志${new Date().getTime()}.xlsx`)
}
onMounted(() => {
  setTimeout(() => {
    loading.value = false
  }, 300)
  window.onresize = function temp() {
    screenHeight.value = document.documentElement.clientHeight - 200 + 'px;'
  }
})
function syntaxHighlight(json) {
  if (typeof json != 'string') {
    json = JSON.stringify(json, undefined, 10)
  }
  json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
  return '<pre>' + json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number'
        if (/^"/.test(match)) {
          if (/:$/.test(match)) {
            cls = 'key'
          } else {
            cls = 'string'
          }
        } else if (/true|false/.test(match)) {
          cls = 'boolean'
        } else if (/null/.test(match)) {
          cls = 'null'
        }
        return '<span class="' + cls + '">' + match + '</span>'
      }) + '</pre>' + '<style >\n' +
      '\n' +
      '    pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }\n' +
      '    .string { color: green; }\n' +
      '    .number { color: darkorange; }\n' +
      '    .boolean { color: blue; }\n' +
      '    .null { color: magenta; }\n' +
      '    .key { color: red; }\n' +
      '\n' +
      '\t    \n' +
      '}\n' +
      '\n' +
      '</style>'
}

getList()

</script>

<style scoped>

/deep/ .pre {
  outline: 1px solid #ccc;
  padding: 5px;
  margin: 5px;
}

/deep/ .string {
  color: green;
}

/deep/ .number {
  color: darkorange;
}

/deep/ .boolean {
  color: blue;
}

/deep/ .null {
  color: magenta;
}

/deep/ .key {
  color: red;
}


</style>
